<template>
  <div id="chinaMap" :style="{ width: '1200px', height: '500px' }"></div>
</template>


// <script>
export default {
  data() {
    return {
      cate:"",
      province: [
        { name: "上海", value: 90 },
        { name: "山东", value: 80 },
        { name: "江苏", value: 20 },
        { name: "北京", value: 80 },
        { name: "安徽", value: 90 },
      ],
    };
  },
  methods: {},
  created() {},
  mounted() {
    var chartDom = document.getElementById("chinaMap");
    var myChart = this.echarts.init(chartDom);
    var option;

    option = {
      visualMap: {
        left: "left",
        min: 0,
        max: 100,
        inRange: {
          color: [
            "#313695",
            "#4575b4",
            "#74add1",
            "#abd9e9",
            "#e0f3f8",
            "#ffffbf",
            "#fee090",
            "#fdae61",
            "#f46d43",
            "#d73027",
            "#a50026",
          ],
        },
        text: ["High", "Low"], // 文本，默认为数值文本
        calculable: true,
      },
      //   toolbox: {
      //     show: true,
      //     //orient: 'vertical',
      //     left: "left",
      //     top: "top",
      //     feature: {
      //       dataView: { readOnly: false },
      //       restore: {},
      //       saveAsImage: {},
      //     },
      //   },  //左上角的下载按钮等
      series: [
        {
          name: "china",
          type: "map",
          map: "china",
          emphasis: {
            label: {
              show: true,
            },
          },
          // 文本位置修正
          textFixed: {
            Alaska: [20, -20],
          },
          data: this.province,
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>

